import React, { Component } from 'react';
// import * as service from "../../api/index"
import * as service from "../../api/index"
import "../../styles/Dizhilist.scss"
import store from '../../store/index'
import {
    List, SwipeAction,
    NavBar,


} from 'antd-mobile'
class Dizhilist extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: []
        }
    }
    async componentDidMount() {
       this.gitlist()
    }


    //获取地址列表
    async  gitlist(){
        var res = await service.address_list({ userid: localStorage.getItem("userid") })
        this.setState({ list: res.data.data })
        
      }

      //编辑地址
   
      bianji(id){

        this.props.history.push({pathname: "/Dizhi", state: { id: id }} )
      }
    //   去添加地址界面
    addDizhi() {
   
        this.props.history.push({pathname: "/Dizhi", state: { null:"77" }} )
    }
     async   removeDizhi(id){
       var res= await service.address_delete({addressid:id})
       
       this.gitlist()
    }
    fanhui(){
        this.props.history.go(-1)
    }

    //选中这一项地址
 async   xuanze(item){
        store.dispatch( { type:'cundizhi', payload: item } )
        this.props.history.push("/querenDingdan")
        
    
    }
    //更新地址
    render() {
        return (
            <div className='Dizhilist'>
                <div className='header'>  <NavBar onBack={() => { this.fanhui() }}>我的地址</NavBar></div>
                {
                    <List className='item2'>

                        {this.state.list.map(item => (
                            <SwipeAction
                                key={item.addressDetail}
                                rightActions={[
                                    {
                                        key: 'delete',
                                        text: '删除',
                                        color: 'danger',
                                        onClick: async () => {
                                            this.removeDizhi(item.addressid)
                                        },
                                    },
                                ]}
                            >
                                <List.Item> 
                                 <div className='item'>
                                 <input onClick={()=>{this.xuanze(item)}} className='left' type="checkbox" />
                                        <div className='nav'>
                                            <p>{item.name} <span>{item.tel}</span></p>
                                        </div>
                                        <div onClick={()=>{this.bianji(item.addressid)}} className='right'>编辑</div>
                                 </div>
                                </List.Item>

                            </SwipeAction>
                        ))}
                   </List>
                }
            

                <div className='addDizhi' onClick={() => { this.addDizhi() }}>添加地址</div>
            </div>
        );
    }
}

export default Dizhilist;